<template>
  <Dialog :visible.sync="dialog.visible" :title="dialog.title" :width="dialog.width" @onClose='onClose'
    @onConfirm='confirm' :height="dialog.height">
    <template v-slot:content>
      <!-- 角色列表 -->
      <el-table size='small' :height="tableHeight" :data="roleList.list" border stripe>
        <el-table-column width="50" align="center" label="选择">
          <template #default="scope">
            <el-radio v-model="selectRoleId" :label="scope.row.roleId" @change="getSlectRole(scope.row)">{{ ''
            }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="parms.currentPage"
        :page-sizes="[4, 20, 40, 80, 100]" :page-size="parms.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="parms.total" background></el-pagination>
    </template>
  </Dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
const emit = defineEmits(['save'])
import Dialog from '@/components/dialog/Dialog.vue'
import { useDialog } from '@/hooks/useDialog'
import { useAssignRole } from '@/composables/user/useAssignRole';
const { dialog, onClose, onShow } = useDialog()
const { confirm, show, roleList, parms, sizeChange, currentChange, tableHeight, selectRoleId, getSlectRole } = useAssignRole(dialog, onClose, onShow, emit)
//暴露方法
defineExpose({
  show
})
</script>

<style lang="scss" scoped></style>